<template>
  <div class="page">
    <m-header :title="langText&&langText.nodepower" ></m-header>
    <section class="body">
      
      <div class="box">

        <div class="box-3" v-for="(item,index) in list" :key="index">
          <div class="box3_left">
            <img :src="api+item.image" alt="">
          </div>
          <div class="box3_right">
              <p class="title">{{item.name_cn}}</p>
              <p>{{langText&&langText.price}}：{{item.price}}</p>
              <p class="hh">{{langText&&langText.dailyincome}}：{{item.per2}}%~{{item.per3}}%</p>
              <button class="btn-submit btn-origin r_btn" @click="goTo(item.id)">{{langText&&langText.rentnow}}</button>
          </div>
        </div>

       
      </div>

    </section>
    <m-Footer></m-Footer>
    <m-load ref="load"></m-load>

  </div>
</template>
<script>
import { Init, Index, Owner, Trade,Base } from '@/server/server.js';
import {Util,Load} from '@/assets/commonjs/utils.js';
import {mapGetters} from 'vuex';
import { Hashrate } from "@/assets/commonjs/lan.js";
export default {
  data(){
      return {
        list:[],
        langText:null,
        allTxt:null,
      }
  },
  mounted() {
    this.getlist();
    this.initData();
  },
  computed: {
    ...mapGetters(['uid','api','getLangId'])
  },
  methods: {
    initData(){
      this.allTxt = Object.assign({},Hashrate)
      this.getlang();
    },
    getlang(){
      Base.getlang().then(res=>{
        if(res.code==1){
          this.langText = Object.assign({},res.data.nodepower,res.data.menu,res.data.register,res.data.currency)
          setTimeout(()=>{
            
            localStorage.setItem('hashrate',JSON.stringify(this.langText));
          },200)
        }else{
          mui.toast(res.msg)
        }
      })
    },
    goTo(id){
      this.$router.push({name:'HashrateDetail',query:{id}})
    },
    getlist(){
      Trade.getlist().then(res=>{
        if(res.code==1){
          // console.log(res)
          this.list = res.data;
        }else{
          mui.toast(res.msg)
        }
      })
    }
  }
};
</script>
<style lang="less" scoped>
@import "~link-less";
.body {
  line-height: 36px;
  background-color: @bg-color;
  
  .box{
    padding: 0 20px;
    margin-top: 20px;
    margin-bottom: 30px;
    .box-3{
      width:710px;
      // height:208px;
      background:rgba(255,255,255,1);
      border-radius:10px;
      margin-top: 20px;
      padding: 20px;
      display: flex;
      .box3_left{
        width: 216px;
        height: 168px;
        background-color: #D8D8D8;
        border-radius: 10px;
        display: inline-block;
        img{
          width: 216px;
          height: 168px;
        }
      }
      .box3_right{
        flex: 1;
        height: 100%;
        // display: inline-block;
        // display: flex;
        // justify-content: space-between;
        margin-left: 20px;
        position: relative;
          p{
            // display: inline;
            margin-top: 15px;
            color: #000;
            font-size: 20px;
          }
          .hh{
            width: 60%;
          }
          .title{
            font-weight: 600;
            font-size: 30px;
          }
          .r_btn{
            padding: 13px 27px;
            border-radius: 10px;
            position: absolute;
            bottom: 0;
            right: 0;
          }
      }
    }
  }
}
</style>
<style lang="less">
._v-container {
  height: 300px!important;
}
._v-container>._v-content>.loading-layer .spinner-holder .spinner, ._v-container>._v-content>.pull-to-refresh-layer .spinner-holder .spinner{
    margin-top: 0!important;
    fill: white!important;
    stroke: white!important;
    z-index: 1;
}
.page{
  /deep/ section .header .nav{
    background-color: #fff !important;
    span{
      color: #000;
    }
    .center{
      color: #000;
    }
  }
}
</style>
